<!-- 信息列表 -->
<template>
  <div>
    <el-form :model="form" size="medium" label-width="120px">
      <el-col :span="5">
        <el-form-item label="类型：" label-width="60px">
          <my-select
            :model.sync="form.dataType"
            :options="dataTypeList"
            :visibleChange="getDataTypeList"
          ></my-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="日期：">
          <my-timeStartEnd
            :timeStart.sync="form.timeStart"
            :timeEnd.sync="form.timeEnd"
            :placeholder="['开始日期', '结束日期']"
          ></my-timeStartEnd>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="关键字：">
          <my-select
            :model.sync="form.keyWorld"
            :options="keyWorldList"
          ></my-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="" label-width="10px">
          <el-input
            v-model="form.content"
            placeholder="请输入内容"
            size="medium"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-button
        type="danger"
        size="medium"
        style="margin-left:10px"
        @click="searchNews"
        >搜索</el-button
      >
      <el-button
        type="danger"
        size="medium"
        style="float:right"
        @click="dialogAdd = true"
        >新增</el-button
      >
    </el-form>
    <myTable
      ref="newsTable"
      :tableHead="tableHead"
      :data="newsList"
      select
      page
      right
      noPageSizes
    >
      <el-table-column
        slot="footerSlot"
        label="操作"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteRow(scope.row)" size="mini"
            >删除</el-button
          >
          <el-button type="success" size="mini">编辑</el-button>
        </template>
      </el-table-column>
    </myTable>
    <el-dialog title="新增" :visible.sync="dialogAdd" width="650px">
      <el-form :model="dialogForm" size="medium" label-width="60px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型：">
              <my-select
                :model.sync="dialogForm.dataTyep"
                :options="dataTypeList"
              ></my-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="标题：">
          <el-input
            v-model="dialogForm.title"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="概括：">
          <el-input
            type="textarea"
            v-model="dialogForm.title"
            :autosize="{ minRows: 2, maxRows: 6 }"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd = false" size="medium">取消</el-button>
        <el-button type="danger" size="medium">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//引入选择框
import mySelect from "@/components/eleParts/select";
//引入时间起止期
import myTimeStartEnd from "@/components/eleParts/timeStartEnd";
//引入表格
import myTable from "@/components/eleParts/table";
import { log } from "util";
export default {
  name: "infoIndex",
  props: [],
  components: {
    mySelect,
    myTimeStartEnd,
    myTable
  },
  data() {
    return {
      form: {
        dataType: null,
        keyWorld: 1,
        content: null,
        timeStart: null,
        timeEnd: null
      },
      dialogForm: {
        dataTyep: null,
        title: null
      },
      dataTypeList: [],
      keyWorldList: [
        {
          value: 1,
          label: "ID"
        },
        {
          value: 2,
          label: "标题"
        }
      ],
      tableHead: [
        {
          prop: "title",
          label: "标题"
        },
        {
          prop: "type",
          label: "类别",
          width: 120,
        },
        {
          prop: "date",
          label: "日期",
          width: 150
        },
        {
          prop: "user",
          label: "管理人",
          width: 90
        }
      ],
      newsList: [],
      dialogAdd: false
    };
  },
  computed: {},
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let data = await this.axios.post("/mockApi/getNews", this.form);
      this.newsList = data;
      this.$refs.newsTable.total = data.length;
    },
    searchNews() {
      this.getList();
    },
    async getDataTypeList() {
      if (this.dataTypeList.length === 0) {
        let resopnd = await this.axios.post("/news/getCategory/");
        debugger;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.keyCol {
  margin: 0 5px;
}
</style>
